<template>
    <el-col :span="Number(colspan)">
        <el-form-item
            :prop="name"
            :label-width="labelWidth + 'px'"
            :label="label"
            :title="label"
            v-show="property.p.indexOf('H') === -1">
            <el-input @keyup.native.enter="onEnter" v-model="property.value" :placeholder="placeholder">
                <i class="el-icon-search el-input__icon"
                   slot="suffix"
                   @click="onClick">
                </i>
            </el-input>
        </el-form-item>
        <el-dialog class="dialog-content" border :title="title" @close='closeDialog' :visible.sync="dialogVisible" width="70%">
            <el-form :inline="true" :model="form" class="demo-form-inline" style="margin-bottom:20px;">
                <!-- <el-row :gutter="10">
                    <el-col :span="12"> -->
                        <el-form-item :label="label" colspan="16" >
                            <el-input size="medium"  style="width:300px;"  v-model="form[name]" :placeholder="placeholder" @change="onChange"></el-input>
                        </el-form-item>
                    <!-- </el-col>
                    <el-col :span="8" v-if="type == 'person' && searchList && searchList.length==0"> -->
                        <el-form-item label="姓名" colspan="16"  v-if="type == 'person' && searchList && searchList.length==0">
                            <el-input size="medium"  style="width:300px" v-model="form.aac003" placeholder="输入姓名"></el-input>
                        </el-form-item>
                    <!-- </el-col>
                    <el-col :span="8" v-if="type == 'company' && searchList && searchList.length==0"> -->
                        <el-form-item label="单位名称" colspan="16"  v-if="type == 'company' && searchList && searchList.length==0">
                            <el-input size="medium"  style="width:300px" v-model="form.aab069" placeholder="请输入单位名称"></el-input>
                        </el-form-item>
                    <!-- </el-col>
                    <el-col :span="4" v-for="(item,index) in inputList" :key="index"> -->
                        <el-form-item :label="item.value" v-for="(item,index) in inputList" :key="index" >
                            <el-input size="medium"  v-model="form[item.key]" :placeholder="'请输入'+item.value"></el-input>
                        </el-form-item>
                    <!-- </el-col>

                    <el-col :span="4"> -->
                        <el-form-item label="">
                            <el-button size="medium" type="primary" @click="query">查询</el-button>
                        </el-form-item>
                    <!-- </el-col>
                </el-row> -->
            </el-form>
            <el-table class="ep-table" :data="tableData" style="width: 100%" height="250px" highlight-current-row @row-click="tableClick" @row-dblclick="tableDbClick">
                <slot></slot>
            </el-table>
            <!--<div style="margin-bottom:10px;">-->
            <!--<el-pagination-->
            <!--@size-change="handleSizeChange" @current-change="handlePageChange" background-->
            <!--layout="total, sizes, prev, pager, next, jumper" :page-sizes="[20, 40, 60, 80,100]"-->
            <!--:current-page="pager.page" :page-size="pager.size" :total="pager.total">-->
            <!--</el-pagination>-->
            <!--</div>-->
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </el-col>
</template>

<script type="es6">

    export default {
        props: {
            colspan: {
                type: String,
                default: '24'
            },
            labelWidth: {
                type: String,
                default: '140'
            },
            label: {
                type: String,
                default: ''
            },
            title:{
                type: String,
                default: '信息查询'
            },
            placeholder: {
                type: String,
                default: ''
            },
            p: {
                type: String,
                default: ''
            },
            codetype: {
                type: String,
                default: ""
            },
            type: String,
            maxlength: Number,
            property: {
                type: Object,
                default: function () {
                    return {
                        value: '',
                        p: ''
                    }
                }
            },
            name: {
                type: String,
                default: ''
            },
            datas: {
                type: Object,
                default: null
            },
            api:{
                type: String,
                default: ''
            },
            tagType: {
                type: String,
                default:''
            },
            functionId: {
                type: String,
                default: ''
            },
            isCodeType:{
                type: Boolean,
                default: false
            },
            searchList:{
                type: Array,
                default: ()=>[]
            },
            formName:{
                type: String,
                default: 'formData'
            }
        },
        data() {
            return {
                table:[],
                hidden:false,
                dialogVisible:false,
                tableData:[],
                id:{
                    randowId:""
                },
                pager:{
                    page:1,
                    size:20,
                    total:0,
                },
                row:{},
                form:{},
            }
        },
        watch:{
            property: {
                handler(value) {
                    this.setProperty(value);
                },
                deep: true
            },
            formData: {
                handler(value) {
                    if(this.searchList && this.searchList.length>0){
                        this.inputList.map(item=>{
                            this.form[item.key] = '';
                            this.form[item.key] = this.formData[item.key].value;
                        })
                    }
                },
                deep: true
            }
        },
        computed:{
            codeTypes() {
                return this.$store.getters.codeTypes;
            },
            inputList(){
                let list = [];
                if(this.searchList && this.searchList.length>0){
                    this.searchList.map(item=>{
                        Object.keys(item).map(el=>{
                            list.push({
                                key:el,
                                value:item[el]
                            })
                        })
                    })
                }
                return list
            },
            formData(){
                return (this.datas && this.datas[this.formName]) || {};
            }
        },
        mounted() {
            this.form[this.name] = '';
            this.form[this.name] = this.property.value;
        },
        methods: {
            // dialog关闭事件 清空tableData
            closeDialog() {
                this.tableData = [];
            },
            /**
             * 同步property
             */
            setProperty(value) {
                this.form[this.name] = value.value;
            },
            /**
             * form值改变
             */
            onChange(value){
                this.property.value = value;
            },
            /**
             * 请求列表（回车）
             */
            onEnter() {
                this.getUserId(0);
            },
            /**
             * 点击弹框不请求
             */
            onClick(){
                if (this.property.value != "" ) {
                    this.dialogVisible = !this.dialogVisible;
                    this.getUserId(1);
                }else{
                    this.dialogVisible = !this.dialogVisible;
                }

            },

            /**
             * 表格点击事件
             */
            tableClick(row){
                this.row = row;
                // this.id.randowId = Math.random();
            },
            /**
             * 表格双击事件
             */
            tableDbClick(row){
                this.dialogVisible = false;
                this.row = row;
                this.getCommonData(this.row);
                // this.id.randowId = Math.random();
            },
            /**
             * 提交id
             */
            submit(){
                if(this.id && (this.id.aac001 || this.id.aab001)){
                    this.dialogVisible = false;
                    // this.id.randowId = Math.random();
                    this.getCommonData(this.row);
                }
            },
            /**
             * 查询
             */
            query(){
                this.getUserId(1);
            },
            /**
             * 根据身份证获取id
             */
            getUserId(type){
                let params ={
                    searchData:this.form,
                    ...this.pager
                };
                let url = this.api?this.api:this.$route.path;
                this.$api.commonPost(url,params).then(res => {
                    if (res.status === '0') {
                        if(type){
                            this.tableData = res.data;
                        }else{
                            if(res.data && res.data.length == 1){
                                this.row = res.data[0] || {};
                                this.getCommonData(this.row);
                            }else if(res.data && res.data.length > 1){
                                this.dialogVisible = true;
                                this.tableData = res.data;
                            }
                        }
                    } else if (res.successMessage) {
                        res.successMessage.map(item => {
                            this.$message({
                                type: 'success',
                                message: item,
                                duration: 0,
                                showClose: true
                            })
                        })
                    } else if (res.errorMessage && res.errorMessage.length > 0) {
                        res.errorMessage.map(item => {
                            this.$message({
                                type: 'error',
                                message: item,
                                duration: 0,
                                showClose: true
                            })
                        })
                    } else if (res.warnMessage && res.warnMessage.length > 0) {
                        res.warnMessage.map(item => {
                            this.$message({
                                type: 'warning',
                                message: item,
                                duration: 0,
                                showClose: true
                            })
                        })
                    }
                });
            },
            /**
             * 根据id获取用户信息
             */
            getCommonData(row){
                let params = {
                    panel: {
                        psInfo: {},
                        psInsure: [],
                        cpInfo: {},
                        cpInsure: [],
                        functionid: this.functionId
                    },
                    commonSearch_info: {
                        ...row
                    },
                    ...this.datas,
                    path: this.$route.path
                }
                if(this.type == 'person'){
                    params.commonSearch_info.personInfo = row.aac001;
                }else if(this.type == 'company'){
                    params.commonSearch_info.companyInfo = row.aab001;
                }
                if(this.isCodeType){
                    params.codeTypes = this.codeTypes;
                }
                this.$api.commonPost(this.$route.path + '/doCheck/commonSearch_info/', params).then(res => {
                    if (res.status === '0') {
                        this.$store.dispatch('SET_COMMON', res.data);
                        if(res.data.codeTypes){
                            this.$store.dispatch('SET_CODETYPE', res.data);
                        }
                    } else if (res.successMessage) {
                        res.successMessage.map(item => {
                            this.$message({
                                type: 'success',
                                message: item,
                                duration: 0,
                                showClose: true
                            })
                        })
                    } else if (res.errorMessage && res.errorMessage.length > 0) {
                        res.errorMessage.map(item => {
                            this.$message({
                                type: 'error',
                                message: item,
                                duration: 0,
                                showClose: true
                            })
                        })
                    } else if (res.warnMessage && res.warnMessage.length > 0) {
                        res.warnMessage.map(item => {
                            this.$message({
                                type: 'warning',
                                message: item,
                                duration: 0,
                                showClose: true
                            })
                        })
                    }
                });
            },
            /**
             * 页面码改变时事件
             */
            handlePageChange(page) {
                this.pager.page = page;
                this.getUserId(1);
            },
            /**
             * 每页条数改变事件
             */
            handleSizeChange(size) {
                this.pager.size = size;
                this.getUserId(1);
            },
        }
    }
</script>

<style lang="less" scoped>
    .search-content{
        display: flex;
        justify-content:space-between;
        .search-input {
            display: flex;
            flex: 1;
            margin-right: 30px;
            max-width:500px;
            span {
                /*flex: 100px;*/
                display: inline-block;
                margin-right: 10px;
                line-height: 36px;
                /*overflow: hidden;*/
                /*text-overflow: ellipsis;*/
                white-space: nowrap;
                /*min-width:130px;*/
            }

            span:before {
                content: '*';
                color: #f56c6c;
                margin-right: 4px;
            }

            .el-icon-search {
                cursor: pointer;
            }

            .el-icon-search:hover {
                color: #409eff;
            }
        }
    }
    .ep-table{
        .ep-table-item{
            padding:10px;
        }
    }
    .dialog-footer{
        width: calc(100% - 40px);
        /*position: absolute;*/
        bottom: 0;
        right: 0;
        padding: 20px;
    }
    .el-table__body tr.current-row>td{
        background-color:#cdebef!important;
    }
    /deep/ .el-dialog{
        /*height:70vh;*/
    }
    /deep/ .el-dialog__footer{
        padding:0px;
    }
    /deep/ .el-table--enable-row-transition .el-table__body td {
        padding: 12px 0!important;
    }

</style>
